<template>
  <div>
    <van-nav-bar fixed>
      <template #left>
        <img :src="ImgLogo" class="logo" />
      </template>
      <template #right>
        <van-icon
        name="search"
        size="0.48rem"
        color="white"
        @click="$router.push({path:'/search'})"
        />
      </template>
    </van-nav-bar>
    <div class="main">
      <van-tabs
        v-model="active"
        animated
        sticky
        offset-top="1.2266667rem"
        @click="channelClickFn"
      >
        <van-tab
          :title="item.name"
          v-for="item in channelList"
          :key="item.id"
          :name="item.id"
        >
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              offset="10"
              @load="onLoad"
            >
              <ArticleList :arr="articlesList" @re="removeFn"></ArticleList
            ></van-list>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
      <!-- +号图标 (编辑数据) -->
      <van-icon
        name="plus"
        size="0.37333334rem"
        class="moreChannels"
        @click="show = true"
      />

      <!-- 弹出层组件 -->
      <!-- close-on-click-overlay 是否在点击遮罩层后关闭（false 不关闭） -->
      <van-popup
        v-model="show"
        class="edit_wrap"
        @close="$refs.edit.show = false"
      >
        <div class="popup-container">
          <!-- 弹出层的主体区域 -->
          <div class="pop-body">
            <ChannelEdit
              :userChannelList="channelList"
              :tabsList="tabsList"
              @closePop="show = false"
              @ccid="ccidFn"
              ref="edit"
            ></ChannelEdit>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import ImgLogo from '@/assets/logo.png'
import {
  channelAPI,
  articlesListAPI,
  articleDislikeAPI,
  articleReportAPI
} from '@/api'
import ArticleList from './ArticleList.vue'
import ChannelEdit from './ChannelEdit.vue'
import { toTimeAge } from '@/utils/date'
export default {
  name: 'Home',
  data () {
    return {
      ImgLogo,
      active: 0,
      channelList: [],
      articlesList: [],
      channelId: 0,
      loading: false,
      finished: false,
      nextTime: null,
      isLoading: false,
      show: false
    }
  },
  components: {
    ArticleList,
    ChannelEdit
  },
  async created (channelId) {
    const res = await channelAPI()
    this.channelList = res.data.data.channels
    this.getArticleList()
  },
  methods: {
    toTimeAge,
    async getArticleList () {
      const res2 = await articlesListAPI({
        channelId: this.channelId,
        timestamp: this.nextTime
      })
      if (res2.data.data.results === 0) {
        this.finished = true
        return
      }
      this.articlesList = [...this.articlesList, ...res2.data.data.results]
      this.nextTime = res2.data.data.pre_timestamp
      res2.data.data.results.forEach((obj) => {
        obj.pubdate = this.toTimeAge(obj.pubdate)
      })
      // console.log(res2)
      this.loading = false
      this.isLoading = false
    },
    channelClickFn (channelId) {
      this.channelId = channelId
      this.nextTime = null // 疑点
      this.articlesList = []
      this.getArticleList()
    },
    onLoad () {
      if (this.articlesList.length === 0) {
        this.loading = false
        return
      }
      console.log(this.nextTime)
      this.getArticleList()
    },
    onRefresh () {
      this.nextTime = null // 疑点
      console.log(this.nextTime)
      this.articlesList = []
      this.getArticleList()
    },
    async removeFn (item, action) {
      const index = this.articlesList.findIndex(
        (val) => val.art_id === item.art_id
      )
      if (index !== -1) {
        this.articlesList.splice(index, 1)
      }
      if (action.name === '不感兴趣') {
        const res = await articleDislikeAPI({
          artId: item.art_id
        })
        console.log(res)
      } else {
        const res2 = await articleReportAPI({
          artId: item.art_id,
          type: action.value
        })
        console.log(res2)
      }

      this.articlesList = []
      this.getArticleList()
    },
    tabsList () {},
    ccidFn (obj) {
      this.active = obj.id
      this.channelClickFn(obj.id)
    },
    searchBtn () { // 搜索点击事件
      this.$router.push('/search')
    }
  }
}
</script>

<style scoped lang="less">
.logo {
  width: 100px;
  height: 30px;
}
.main {
  padding-top: 1.2266667rem;
  padding-bottom: 1.333334rem;
}

// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}

// 弹出层容器宽度高度铺满屏幕
/*频道编辑弹出层 */
.edit_wrap {
  width: 100%;
  height: 100%;
}
</style>
